<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>三角形绘制方法 &middot; pfan</title>
        <meta name="description" content="在做UI（页面重构）的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头，一般情况下可以通过伪类使用unicode解决大部分问题。
现在我们来总结下几种使用css绘制三角形的方法，dom结构如下：
&lt;div class=&#34;triangle&#34;&gt;&lt;/div&gt; 最简单最方便的办法 background 代码忽略 unicode .triangle:after{ display:block; content:&#34;\25B2&#34;; color:&#34;#fd5353&#34;; font-size:20px; }  注意，伪类必须加上content属性，否则不生效
 unicode图表
border .triangle{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 使用border绘制三角形是什么原理？事实上，宽度相等的border是以45度对接的，如下图：
那么没有了上border就是如下图：
再设置div的宽度为0，就是如下图：
再设置div的高度为0，如下图：
最后设置左右border的颜色为透明，如下图：
再来个动图：
通过这种原理，我们可以做更多的图形，比如五角星、六角星等，更多图形请移步shapesofcss
使用css3 transform rotate .triangle { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; //划重点 overflow:hidden; } .triangle: before { content: &#39;&#39;; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0079C6; //划重点 transform-origin: 0 100%; transform: rotate(45deg); }  为什么是1.">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="generator" content="Hugo 0.73.0" />
        <meta name="robots" content="index,follow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta property="og:title" content="三角形绘制方法">
<meta property="og:description" content="在做UI（页面重构）的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头，一般情况下可以通过伪类使用unicode解决大部分问题。
现在我们来总结下几种使用css绘制三角形的方法，dom结构如下：
&lt;div class=&#34;triangle&#34;&gt;&lt;/div&gt; 最简单最方便的办法 background 代码忽略 unicode .triangle:after{ display:block; content:&#34;\25B2&#34;; color:&#34;#fd5353&#34;; font-size:20px; }  注意，伪类必须加上content属性，否则不生效
 unicode图表
border .triangle{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 使用border绘制三角形是什么原理？事实上，宽度相等的border是以45度对接的，如下图：
那么没有了上border就是如下图：
再设置div的宽度为0，就是如下图：
再设置div的高度为0，如下图：
最后设置左右border的颜色为透明，如下图：
再来个动图：
通过这种原理，我们可以做更多的图形，比如五角星、六角星等，更多图形请移步shapesofcss
使用css3 transform rotate .triangle { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; //划重点 overflow:hidden; } .triangle: before { content: &#39;&#39;; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0079C6; //划重点 transform-origin: 0 100%; transform: rotate(45deg); }  为什么是1.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://blog.steps.info/2017/07/12/css%E4%B8%89%E8%A7%92%E5%BD%A2%E7%BB%98%E5%88%B6%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/">
        <link rel="stylesheet" href="https://blog.steps.info/dist/site.css">
        <link rel="stylesheet" href="https://blog.steps.info/dist/syntax.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin,cyrillic-ext,latin-ext,cyrillic">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        
        
        
        
    </head>
    <body>
        
<script type="application/javascript">
var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
var doNotTrack = (dnt == "1" || dnt == "yes");
if (!doNotTrack) {
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
	ga('create', 'XXX', 'auto');
	ga('set', 'anonymizeIp', true);
	ga('send', 'pageview');
}
</script>


        <div id="wrapper">
            <header class="site-header">
                <div class="container">
                    <div class="site-title-wrapper">
                        
                            <h1 class="site-title">
                                <a title="Homepage" href="https://blog.steps.info/">Homepage</a>
                            </h1>
                        
                        <a class="button-square" href="https://blog.steps.info/index.xml"><i class="fa fa-rss"></i></a>
                        
                            <a class="button-square button-social hint--top" data-hint="Twitter" title="Twitter" href="https://twitter.com/pangel3" rel="me">
                                <i class="fa fa-twitter"></i>
                            </a>
                        
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Gitlab" title="Gitlab" href="https://gitlab.com/funnypan" rel="me">
                                <i class="fa fa-gitlab"></i>
                            </a>
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Github" title="Github" href="https://github.com/RazzilDarkbrew" rel="me">
                                <i class="fa fa-github-alt"></i>
                            </a>
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Stack Overflow" title="Stack Overflow" href="https://stackoverflow.com/users/7784704/stepsinfo" rel="me">
                                <i class="fa fa-stack-overflow"></i>
                            </a>
                        
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Email" title="Email" href="mailto:gemini0525@foxmail.com">
                                <i class="fa fa-envelope"></i>
                            </a>
                        
                    </div>

                    <ul class="site-nav">
                        
                    </ul>
                </div>
            </header>

            <div id="container">


<div class="container">
    <article class="post-container" itemscope="" itemtype="http://schema.org/BlogPosting">
        <header class="post-header">
    <h1 class="post-title" itemprop="name headline">三角形绘制方法</h1>
    
    <p class="post-date">
        <span>Published <time datetime="2017-07-12" itemprop="datePublished">Wed, Jul 12, 2017</time></span>
        <span>by</span>
        <span itemscope="" itemprop="author" itemtype="https://schema.org/Person">
            <span itemprop="name">
                <a href="https://github.com/RazzilDarkbrew" itemprop="url" rel="author">pfan</a>
            </span>
        </span>
    </p>
    
        <p class="post-reading post-line">
            <span>Estimated reading time: 1 min</span>
        </p>
    
</header>

        <div class="post-content clearfix" itemprop="articleBody">
    

    <p>在做UI（页面重构）的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头，一般情况下可以通过伪类使用unicode解决大部分问题。</p>
<p>现在我们来总结下几种使用css绘制三角形的方法，dom结构如下：</p>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;triangle&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></div><h2 id="最简单最方便的办法-background">最简单最方便的办法 background</h2>
<pre><code>代码忽略
</code></pre><h2 id="unicode">unicode</h2>
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">triangle</span><span class="p">:</span><span class="nd">after</span><span class="p">{</span>
    <span class="k">display</span><span class="p">:</span><span class="kc">block</span><span class="p">;</span>
    <span class="k">content</span><span class="p">:</span><span class="s2">&#34;\25B2&#34;</span><span class="p">;</span>
    <span class="k">color</span><span class="p">:</span><span class="s2">&#34;#fd5353&#34;</span><span class="p">;</span>
    <span class="k">font-size</span><span class="p">:</span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div><blockquote>
<p>注意，伪类必须加上content属性，否则不生效</p>
</blockquote>
<p><a href="http://www.w3cplus.com/solution/css3content/images/html.png">unicode图表</a></p>
<h2 id="border">border</h2>
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">triangle</span><span class="p">{</span>
    <span class="k">width</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
    <span class="k">height</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
    <span class="k">border-left</span><span class="p">:</span> <span class="mi">50</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">transparent</span><span class="p">;</span>
    <span class="k">border-right</span><span class="p">:</span> <span class="mi">50</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">transparent</span><span class="p">;</span>
    <span class="k">border-bottom</span><span class="p">:</span> <span class="mi">100</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">red</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div><p>使用border绘制三角形是什么原理？事实上，宽度相等的border是以45度对接的，如下图：</p>
<p><img src="https://i.stack.imgur.com/hZefy.png" alt="image"></p>
<p>那么没有了上border就是如下图：</p>
<p><img src="https://i.stack.imgur.com/uV9Q5.png" alt="image"></p>
<p>再设置div的宽度为0，就是如下图：</p>
<p><img src="https://i.stack.imgur.com/K1A7G.png" alt="image"></p>
<p>再设置div的高度为0，如下图：</p>
<p><img src="https://i.stack.imgur.com/NsmsW.png" alt="image"></p>
<p>最后设置左右border的颜色为透明，如下图：</p>
<p><img src="https://i.stack.imgur.com/B42zY.png" alt="image"></p>
<p>再来个动图：</p>
<p><img src="https://i.stack.imgur.com/vYvqa.gif" alt="image"></p>
<p>通过这种原理，我们可以做更多的图形，比如五角星、六角星等，更多图形请移步<a href="https://css-tricks.com/examples/ShapesOfCSS/">shapesofcss</a></p>
<h2 id="使用css3-transform-rotate">使用css3 transform rotate</h2>
<p><img src="https://i.stack.imgur.com/mEaS1.jpg" alt="image"></p>
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">triangle</span> <span class="p">{</span>
    <span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
    <span class="k">padding-bottom</span><span class="p">:</span> <span class="mf">21.27</span><span class="kt">%</span><span class="p">;</span> <span class="c">/* = width / 1.41 */</span>
    <span class="k">position</span><span class="p">:</span> <span class="kc">relative</span><span class="p">;</span>
    
    <span class="err">//划重点</span>
    <span class="k">overflow</span><span class="p">:</span><span class="kc">hidden</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">triangle</span><span class="o">:</span> <span class="nt">before</span> <span class="p">{</span>
    <span class="k">content</span><span class="p">:</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
    <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
    <span class="k">top</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
    <span class="k">left</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
    <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
    <span class="k">height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
    <span class="k">background</span><span class="p">:</span> <span class="mh">#0079C6</span><span class="p">;</span>
    
    <span class="err">//划重点</span>
    <span class="k">transform-origin</span><span class="p">:</span> <span class="mi">0</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>        
    <span class="k">transform</span><span class="p">:</span> <span class="nb">rotate</span><span class="p">(</span><span class="mi">45</span><span class="kt">deg</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div><blockquote>
<p>为什么是1.41，因为正方形的对角线长度是约等于1.414。</p>
</blockquote>
<h2 id="使用clip-path">使用clip-path</h2>
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">triangle</span><span class="p">{</span>
    <span class="k">width</span><span class="p">:</span><span class="mi">200</span><span class="kt">px</span><span class="p">;</span>
    <span class="k">height</span><span class="p">:</span><span class="mi">200</span><span class="kt">px</span><span class="p">;</span>
    <span class="k">background</span><span class="p">:</span><span class="mh">#fd5353</span><span class="p">;</span>
    <span class="k">clip-path</span><span class="p">:</span> <span class="nb">polygon</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span> <span class="mi">100</span><span class="kt">%</span><span class="p">,</span> <span class="mi">100</span><span class="kt">%</span> <span class="mi">100</span><span class="kt">%</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div><p>clip-path不支持安卓4.4以下，其余均需使用浏览器前缀-webkit，<a href="http://caniuse.com/#feat=css-clip-path">caniuse</a></p>
<p>详细请移步 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path">clip-path</a></p>

</div>

        <footer class="post-footer clearfix">
    
        <p class="post-tags">
            <span>Tagged:</span>
            
            
                <a href="/tags/css/">css</a>
            
        </p>
    

    <div class="share">
        
            <a class="icon-twitter" href="https://twitter.com/share?text=%e4%b8%89%e8%a7%92%e5%bd%a2%e7%bb%98%e5%88%b6%e6%96%b9%e6%b3%95&url=https%3a%2f%2fblog.steps.info%2f2017%2f07%2f12%2fcss%25E4%25B8%2589%25E8%25A7%2592%25E5%25BD%25A2%25E7%25BB%2598%25E5%2588%25B6%25E6%2596%25B9%25E6%25B3%2595%25E6%2580%25BB%25E7%25BB%2593%2f"
                onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
                <i class="fa fa-twitter"></i>
                <span class="hidden">Twitter</span>
            </a>
        

        
            <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3a%2f%2fblog.steps.info%2f2017%2f07%2f12%2fcss%25E4%25B8%2589%25E8%25A7%2592%25E5%25BD%25A2%25E7%25BB%2598%25E5%2588%25B6%25E6%2596%25B9%25E6%25B3%2595%25E6%2580%25BB%25E7%25BB%2593%2f"
                onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
                <i class="fa fa-facebook"></i>
                <span class="hidden">Facebook</span>
            </a>
        

        
            <a class="icon-google-plus" href="https://plus.google.com/share?url=https%3a%2f%2fblog.steps.info%2f2017%2f07%2f12%2fcss%25E4%25B8%2589%25E8%25A7%2592%25E5%25BD%25A2%25E7%25BB%2598%25E5%2588%25B6%25E6%2596%25B9%25E6%25B3%2595%25E6%2580%25BB%25E7%25BB%2593%2f"
              onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
              <i class="fa fa-google-plus"></i>
                <span class="hidden">Google+</span>
            </a>
        
        
    </div>
</footer>

        
    <div class="comments">
        
    </div>

    </article>
</div>

            </div>
        </div>

        <footer class="footer">
            <div class="container">
                <div class="site-title-wrapper">
                    <h1 class="site-title">
                        <a title="Homepage" href="https://blog.steps.info/">Homepage</a>
                    </h1>
                    <a class="button-square button-jump-top js-jump-top" href="#">
                        <i class="fa fa-angle-up"></i>
                    </a>
                </div>

                <p class="footer-copyright">
                    <span>&copy; 2020 / Powered by <a href="https://gohugo.io/">Hugo</a></span>
                </p>
                <p class="footer-copyright">
                    <span><a href="https://github.com/roryg/ghostwriter">Ghostwriter theme</a> By <a href="http://jollygoodthemes.com">JollyGoodThemes</a></span>
                    <span>/ <a href="https://github.com/jbub/ghostwriter">Ported</a> to Hugo By <a href="https://github.com/jbub">jbub</a></span>
                </p>
            </div>
        </footer>

        <script src="https://blog.steps.info/js/jquery-1.11.3.min.js"></script>
        <script src="https://blog.steps.info/js/jquery.fitvids.js"></script>
        <script src="https://blog.steps.info/js/scripts.js"></script>
    </body>
</html>

